<template>
  <div>
    <el-container class="home-container">
      <!-- header -->
      <el-header>
        <div style="float: left">
          <p class="system-name">创意设计中心工单系统</p>
        </div>
        <div style="float: right">
          <el-dropdown style="float: right; margin: 20px 10px">
            <span class="el-dropdown-link" style="color: #fff; cursor: pointer">
              {{ name }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="logout">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-avatar shape="square" :src="avatar" style="margin: 10px; float: right"></el-avatar>
        </div>
      </el-header>

      <el-container style="overflow: auto">
        <!-- 菜单 -->
        <el-aside>
          <div class="toggle-button" @click="isCollapse = !isCollapse">
            <el-icon :size="20">
              <Expand v-if="isCollapse" />
              <Fold v-if="!isCollapse" />
            </el-icon>
          </div>
          <el-menu router :default-active="activePath" class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item v-if="tool.isLeader()" index="/index" @click="saveActiveNav('/index')">
              <el-icon>
                <House />
              </el-icon>
              <span>首页</span>
            </el-menu-item>

            <el-menu-item v-if="!tool.isLeader()" index="/work_mine" @click="saveActiveNav('/work_mine')">
              <el-icon>
                <House />
              </el-icon>
              <span>我的项目</span>
            </el-menu-item>

            <el-menu-item index="/week_report" @click="saveActiveNav('/week_report')">
              <el-icon>
                <Tickets />
              </el-icon>
              <span>本周工作简报</span>
            </el-menu-item>

            <el-menu-item index="/member_report" @click="saveActiveNav('/member_report')">
              <el-icon>
                <Place />
              </el-icon>
              <span>人员情况</span>
            </el-menu-item>

            <el-menu-item v-if="tool.isLeader()" index="/work_score" @click="saveActiveNav('/work_score')">
              <el-icon>
                <Star />
              </el-icon> <span>项目打分</span>
            </el-menu-item>

            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Finished />
                </el-icon>
                <span>已完成项目</span>
              </template>


              <el-menu-item index="/work_file" @click="saveActiveNav('/work_file')">
                <el-icon>
                  <Files />
                </el-icon>
                <span>项目文件</span>
              </el-menu-item>

              <el-menu-item index="/work_list" @click="saveActiveNav('/work_list')">
                <el-icon>
                  <OfficeBuilding />
                </el-icon>
                <span>项目列表</span>
              </el-menu-item>

              <el-menu-item index="/work_count" @click="saveActiveNav('/work_count')">
                <el-icon>
                  <Clock />
                </el-icon>
                <span>项目统计</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- <el-sub-menu index="2">
              <template #title>
                <el-icon><Medal /></el-icon>
                <span>好稿评选</span>
              </template>
              <el-menu-item
                index="/paper_recommend"
                @click="saveActiveNav('/paper_recommend')"
              >
              <el-icon><Sell /></el-icon>                
              <span>好稿自荐</span>
              </el-menu-item>
              <el-menu-item
                index="/paper_vote"
                @click="saveActiveNav('/paper_vote')"
              >
              <el-icon><ScaleToOriginal /></el-icon>              
              <span>好稿投票</span>
              </el-menu-item>
              <el-menu-item
                index="/paper_result"
                @click="saveActiveNav('/paper_result')"
              >
              <el-icon><Tickets /></el-icon>         
              <span>历史结果</span>
              </el-menu-item>
            </el-sub-menu> -->

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Message />
                </el-icon>
                <span>作业管理</span>
              </template>
              <el-menu-item index="/homework_list" @click="saveActiveNav('/homework_list')">
                <el-icon>
                  <Grid />
                </el-icon>
                <span>作业列表</span>
              </el-menu-item>
              <!-- <el-menu-item
                index="/homework_vote"
                @click="saveActiveNav('/homework_vote')"
              >
              <el-icon><ScaleToOriginal /></el-icon>              
              <span>作业评选</span>
              </el-menu-item>
              <el-menu-item
                index="/homework_result"
                @click="saveActiveNav('/homework_result')"
              >
              <el-icon><Tickets /></el-icon>         
              <span>评选结果</span>
              </el-menu-item> -->
            </el-sub-menu>

            <el-menu-item index="/user/list" @click="saveActiveNav('/user/list')">
              <el-icon>
                <user />
              </el-icon>
              <span>用户管理</span>
            </el-menu-item>

            <el-menu-item index="/other/list" @click="saveActiveNav('/other')">
              <el-icon>
                <View />
              </el-icon>
              <span>一些信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
          <ChatBot></ChatBot>
        <el-container>
          <el-main>
            <!-- 面包屑 -->
            <!-- <Breadcrumb /> -->
            <!-- 主要内容 -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { watch, onBeforeMount, ref } from 'vue'
import avatar from '../assets/img/1.gif'
import { useRouter } from 'vue-router'
import tool from '../tools/tool'
import ChatBot from './ChatBot.vue'
const router = useRouter()
const name = ref()
const role = ref(null)
// 挂载 DOM 之前
onBeforeMount(() => {
  activePath.value = sessionStorage.getItem('activePath')
    ? sessionStorage.getItem('activePath')
    : '/index'

  // 确保在 created 阶段 sessionStorage 已经初始化
  if (sessionStorage) {
    name.value = sessionStorage.getItem('username')
    role.value = sessionStorage.getItem('role')
  }
})
let isCollapse = ref(false)
let activePath = ref('')
// 保存链接的激活状态
const saveActiveNav = (path) => {
  sessionStorage.setItem('activePath', path)
  activePath.value = path
}
const logout = () => {
  // 清除缓存
  sessionStorage.clear()
  localStorage.clear()
  router.push('/login')
}

// 使用 全局后置钩子
router.afterEach((to, from, next) => {
  sessionStorage.setItem('activePath', to.fullPath)
  activePath.value = to.fullPath
})
</script>

<style scoped>
.home-container {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #f2f3f5;
}

.el-header {
  background: #2661ef;
  padding: 0 10px;
  overflow: hidden;
  display: block;
}

.system-name {
  color: #fff;
  font-size: 18px;
}

.el-aside {
  background: white;
  width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-footer {
  color: #cccccc;
  text-align: center;
  line-height: 60px;
}

.el-footer:hover {
  color: #2661ef;
}

.toggle-button {
  background-color: #d9e0e7;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  color: black;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item.is-active {
  color: #fff !important;
  font-size: 15px;
  font-weight: bold;
  background-color: #2661ef !important;
  border-radius: 2px;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  margin: 2px 5px 0px 2px;
}

@media screen and (max-width: 768px) {
  .el-container {
    display: block;
  }

  .toggle-button {
    display: none;
  }

  .el-menu-item span {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }

  .el-sub-menu span {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }

  .el-aside ul {
    width: 100% !important;
    min-height: 0 !important;
  }

  .el-aside li {
    display: inline-block;
  }
}
</style>
